<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg4.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' :leftIconColor="navColor" :bgColor="navBgcolor" @leftClick="navBack"
				:title="info.title">
				<view slot="center" class="navTitle" :style="'color:'+navColor">
					在线查看报告
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30" @scroll="setNavColor">
				<view class="reportHead">
					<view class="bg">
						<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/pdfimg.png" mode="aspectFit"></image>
					</view>
					<view class="txt">
						<view class="tit">
							{{info.title}}
						</view>
						<view class="btns">
							<view class="btn" @tap="downloadPdf">
								下载报告
							</view>
						</view>
					</view>
				</view>
				<view class="pd30">
					<view class="whiteBox">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg3-3.png" mode="widthFix"></image>
						</view>
						<view class="bd box1">
							<view class="name">
								{{info.name}}
							</view>
							<view class="p1">
								{{info.sex+' '+info.school}}
							</view>
							<view class="date">
								<view class="dt">
									测评时间
								</view>
								<view class="dp">
									{{info.testDate|dateFormate('YYYY年MM月DD日')}}
								</view>
							</view>
							<view class="testLs">
								<view class="ltit">
									测评内容
								</view>
								<view class="ul">
									<view class="li" v-for="(i,index) in info.testResult">
										<view class="or">
											{{(index+1)>9?(index+1):('0'+(index+1))}}
										</view>
										<view class="lt">
											{{i.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteBox">
						<view class="boxtit">
							<view class="ico">
								<image src="@/static/images/icon-tl3.png" mode="heightFix"></image>
							</view>
							<view class="tit">
								报告导读
							</view>
							<view class="ico">
								<image src="@/static/images/icon-tr3.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="bd">
							<view class="reportDes" v-html="info.content"></view>
							<view class="table" v-if="info.testResult">
								<view class="bt">
									整体结果
								</view>
								<view class="tbody">
									<view class="tr th">
										<view class="td td1">
											量表
										</view>
										<view class="td td1">
											维度
										</view>
										<view class="td td1">
											分数
										</view>
										<view class="td td1">
											参考值
										</view>
									</view>
									<template v-for="tr in info.testResult">
										<view class="tr">
											<view class="td td1">
												{{tr.name}}
											</view>
											<view class="td3">
												<template v-if="tr.dimensions.length>0">
													<view class="tr3" v-for="(td,index) in tr.dimensions" :key="index">
														<view class="td">
															{{td.title}}
														</view>
														<view class="td">
															<view class="tdi">
																<view class="tdp">
																	{{td.score}}分
																</view>
																<view class="tdico">
																	<view class="ico" v-if="td.score<td.referenceScore">
																		<image src="@/static/images/icon-uper.png"
																			mode="heightFix"></image>
																	</view>
																	<view class="ico" v-if="td.score>td.referenceScore">
																		<image src="@/static/images/icon-lower.png"
																			mode="heightFix"></image>
																	</view>
																</view>
															</view>
														</view>
														<view class="td">
															{{td.referenceScore}}分
														</view>
													</view>
												</template>
												<template v-else>
													<view class="tr3">
														<view class="td">
															{{tr.diagnosis}}
														</view>
														<view class="td">
															<view class="tdi">
																<view class="tdp">
																	{{tr.score}}分
																</view>
																<view class="tdico">
																	<view class="ico" v-if="tr.score<tr.referenceScore">
																		<image src="@/static/images/icon-uper.png"
																			mode="heightFix"></image>
																	</view>
																	<view class="ico" v-if="tr.score>tr.referenceScore">
																		<image src="@/static/images/icon-lower.png"
																			mode="heightFix"></image>
																	</view>
																</view>
															</view>
														</view>
														<view class="td">
															{{tr.referenceScore}}分
														</view>
													</view>
												</template>
											</view>
										</view>
									</template>
								</view>
							</view>
							<view class="suggest">
								<view class="tit">
									评估建议
								</view>
								<view class="items">
									<view class="item" v-for="(i,index) in info.testResult">
										<view class="map" :class="i.score?'':'nomap'">
											<view class="cvscontainer" v-if="i.score">
												<view class="cvs">
													<view class="line1 line">
														<view class="dot1"></view>
														<view class="dot2"></view>
														<view class="i1">
															<view class="cr" :style="'transform:rotate('+(-(136-156*i.referenceScore/100))+'deg)'"></view>
														</view>
													</view>
													<view class="line2 line">
														<view class="dot1"></view>
														<view class="dot2"></view>
														<view class="i1">
															<view class="cr" :style="'transform:rotate('+(-(136-136*i.score/100))+'deg)'"></view>
														</view>
													</view>
												</view>
											</view>
											<view class="hd">
												<view class="score">
													<text class="num">{{i.score}}</text><text>分</text>
												</view>
												<view class="name">
													{{i.name}}
												</view>
												<view class="tag">
													{{i.diagnosis}}
												</view>
											</view>
										</view>
										<view class="idesc" v-html="i.message"></view>
										<view class="fx">
											<view class="li" v-for="(j,jindex) in i.dimensions" :key="jindex">
												<text class="nu">{{jindex+1}}</text>
												<text class="b">你的{{j.title}}得分为：{{j.score}}</text>
												<text v-if="j.grade">,维度等级为{{j.grade}}</text>
												<text v-if="j.suggest">,{{j.suggest}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteBox">
						<view class="boxtit">
							<view class="ico">
								<image src="@/static/images/icon-tl3.png" mode="heightFix"></image>
							</view>
							<view class="tit">
								温馨提示
							</view>
							<view class="ico">
								<image src="@/static/images/icon-tr3.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="bd">
							<view class="reportDes" v-html="info.wramTip">
								
							</view>
						</view>
					</view>
					<view class="fbtns">
						<view class="btn" @tap="downloadPdf">
							下载报告
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow: function() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if (page.options['id']) {
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid: '101',
				navBgcolor: 'transparent',
				navColor: '#65554d',
				info: ''
			}
		},
		watch: {
			itemid: function() {
				this.getInfo();
			}
		},
		methods: {
			setNavColor(e) {
				var that = this;
				var top = e.detail.scrollTop;
				if (top > 100) {
					that.navBgcolor = "#ffffff";
					that.navColor = "#4d5765";
				} else {
					that.navBgcolor = "transparent";
					that.navColor = "#4d5765";
				}
			},
			downloadPdf() { //下载报告
				const that=this;
				const url=that.info.reportUrl;
				uni.downloadFile({
					url:url
				});
			},
			getInfo() {
				var that = this;
				if (!that.itemid) {
					return
				};
				var res = {
					id: 101,
					title: '新生普测',
					name: '刘美美',
					sex: '女',
					school: '北京市海淀一中七年级一班',
					testDate: '2024-9-16',
					reportUrl:'',
					content: `测验报告仅供帮助你了解你的心理状态，仅作参考，不能作为临床诊断的依据，如需准确分析、获得帮助，请进一步咨询专业人士；<br>
<br>
请合理看待心理测评及其结果。心理测评是了解心理状态的方法之一，且其准确性受作答时是否认真、是否如实反映情况等多种因素的影响。因此，以下测验结果可能存在一定偏差，结果仅供参考。<br>
<br>
测评结果没有对错之分、好坏之别，且与大家的学习成绩或操行评定无关。`,
					testResult: [{
							name: '中小学生心理健康量表',
							score: 79,
							referenceScore: 100,
							message: `测试结果显示，您近期可能严重地受到焦虑情绪的困扰，表现在过度担心学习与考试、害怕与人交往、感到孤独与抑郁、自卑与自责、过于敏感、过度恐怖、行为冲动、身体明显感到不适，这给您的学习、生活产生了严重影响。<br>你可以：<br>
积极向其他心理咨询、心理治疗、精神卫生等人员寻求专业帮助。`,
							diagnosis: '具有严重心理问题',
							suggest: [],
							dimensions: [{
									title: '学习焦虑',
									score: 5,
									grade: '异常',
									referenceScore: 8,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '对人焦虑',
									score: 13,
									grade: '异常',
									referenceScore: 12,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '孤独倾向',
									score: 5,
									grade: '异常',
									referenceScore: 10,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '自责倾向',
									score: 5,
									grade: '正常',
									referenceScore: 5,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '过敏倾向',
									score: 7,
									grade: '正常',
									referenceScore: 7,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '身体症状',
									score: 12,
									grade: '正常',
									referenceScore: 12,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '恐怖倾向',
									score: 16,
									grade: '异常',
									referenceScore: 10,
									suggest: `【维度解释】，你可以【维度等级建议】`
								},
								{
									title: '冲动倾向',
									score: 8,
									grade: '异常',
									referenceScore: 5,
									suggest: `【维度解释】，你可以【维度等级建议】`
								}
							]
						},
						{
							name: '广泛性焦虑障碍量表',
							score: 40,
							referenceScore: 40,
							message: `<b>孩子的总分得分为：2</b>，综合等级为没有焦虑症。请孩子继续保持现在的状态！`,
							diagnosis: '',
							suggest: [{
								title: '',
								info: ''
							}],
							dimensions: []
						}
					],
					wramTip:`&nbsp;&nbsp;（1）阅读时可以先查看图表快速掌握报告内容，然后有针对性地阅读对应文字；<br>&nbsp;&nbsp;（2）如报告与你自己或他人的感知有出入，可回忆测试时是否有事情影响了你的判断，或者是否自己答题时有所顾虑；<br>&nbsp;&nbsp;（3）本报告不可作为临床诊断的依据，也不赞成把它作为你生活和学习中重大决策的唯一依据；<br>&nbsp;&nbsp;（4）如对报告内容有不理解的地方，建议向有专业资质的人员进行咨询；<br>&nbsp;&nbsp;（5）本报告为你个人的专属测评结果，建议你在分享时务必谨慎。`
				};
				that.info = res;
			}
		},
		mounted() {
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.suggest{
		.items{
			.item{
				background: linear-gradient(180deg,#e6f6ed,#fff);
			}
		}
	}
	.reportHead {
		position: relative;
		height: 550rpx;

		.bg {
			image {
				display: block;
				width: 604rpx;
				height: 358rpx;
				margin-left: auto;
			}
		}

		.txt {
			position: absolute;
			left: 0;
			top: 30%;
			transform: translate(0, -50%);
			width: 100%;
			z-index: 5;
			box-sizing: border-box;
			padding: 0 30rpx;

			.tit {
				font-size: 50rpx;
				line-height: 1.2;
				font-weight: bold;
				color: #65554d;
				max-width: 7em;
			}

			.btns {
				margin-top: 50rpx;
			}

			.btn {
				font-size: 24rpx;
				width: 6em;
				line-height: 60rpx;
				border-radius: 60rpx;
				background: #fe9c29;
				color: #fff;
				text-align: center;
			}
		}
	}

	.whiteBox {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 40rpx;
		position: relative;
		z-index: 5;

		&:last-child {
			margin-bottom: 0;
		}

		.bg {
			position: absolute;
			left: 60%;
			width: 40%;
			top: 10%;
			height: 80%;
			z-index: -1;

			image {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		.boxtit {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.ico {
				flex: 0 0 auto;
				padding: 0 20rpx;

				image {
					display: block;
					width: auto;
					height: 16rpx;
				}
			}

			.tit {
				font-size: 36rpx;
				color: #4d5765;
				line-height: 1.2;
				flex: 0 1 auto;
			}
		}
	}

	.box1 {
		font-size: 28rpx;
		color: #7c838d;

		.name {
			font-size: 40rpx;
			color: #4d5765;
			margin-bottom: 20rpx;
		}

		.p1 {
			margin-bottom: 30rpx;
		}

		.date {
			margin-bottom: 90rpx;

			.dt {
				margin-bottom: 10rpx;
			}

			.dp {
				color: #4d5765;
			}
		}

		.testLs {
			.ltit {
				font-size: 32rpx;
				color: #4d5765;
			}

			.ul {
				.li {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 5;
					padding: 20rpx 0;

					&:before {
						content: "";
						position: absolute;
						left: 22rpx;
						bottom: 50%;
						top: 0;
						width: 4rpx;
						background: #e5e9ef;
						z-index: -1;
					}

					&:after {
						content: "";
						position: absolute;
						left: 22rpx;
						top: 50%;
						bottom: 0;
						width: 4rpx;
						background: #e5e9ef;
						z-index: -1;
					}

					.or {
						display: flex;
						width: 48rpx;
						height: 48rpx;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						flex: 0 0 auto;
						background: #fff;
						border: 4rpx solid #78cb9b;
						border-radius: 50%;
						margin-right: 20rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #78cb9b;
						position: relative;
						z-index: 5;

						&:after {
							content: "";
							position: absolute;
							left: -10rpx;
							right: -10rpx;
							top: -10rpx;
							bottom: -10rpx;
							box-sizing: border-box;
							border: 10rpx solid #fff;
							border-radius: 50%;
						}
					}

					.lt {
						flex: 1 1 auto;
						overflow: hidden;
						color: #4d5765;
					}

					&:first-child:before,
					&:last-child:after {
						display: none;
					}
				}
			}
		}
	}

	.reportDes {
		font-size: 24rpx;
		color: #7e8998;
		line-height: 36rpx;
		margin-bottom: 45rpx;
	}
</style>